import Icon from '@/components/Icon'
import useInitialState from '@/hooks/useInitialState'
import { Popup, Tabs } from 'antd-mobile'

import { getChannel, setActive } from '@/store/actions/channel'
import styles from './index.module.scss'
import Channels from './components/Channels/Channels'
import { useState } from 'react'
import { useDispatch } from 'react-redux'

const Home = () => {
  const dispatch = useDispatch()
  const { userChannel, active } = useInitialState(getChannel, 'channel')
  const [visible, setVisible] = useState(false)
  const hide = () => {
    setVisible(false)
  }
  const onChange = (key: string) => {
    console.log(key)
    // 修改redux中的channe模块的active
    dispatch(setActive(key))
  }
  return (
    <div className={styles.root}>
      {/* 频道 Tabs 列表 */}
      <Tabs
        className="tabs"
        activeKey={active}
        activeLineMode="fixed"
        onChange={onChange}>
        {userChannel.map((it) => (
          <Tabs.Tab title={it.name} key={it.id}>
            推荐{it.name}的内容
          </Tabs.Tab>
        ))}
      </Tabs>

      <div className="tabs-opration">
        <Icon type="iconbtn_search" />
        <Icon type="iconbtn_channel" onClick={() => setVisible(true)} />
      </div>

      <Popup visible={visible} position="left">
        <Channels hide={hide} />
      </Popup>
    </div>
  )
}

export default Home
